<template>
  <ul id="chat-list" class="m-chat-list p-chat-list">
    <li class="u-msg item-time" v-if="canLoadMore">
      <span class="link-to" @click="getHistoryMsgs">{{$t('l.chat_message2')}}</span>
    </li>
    <li class="u-msg item-time" v-else>{{$t('l.chat_message24')}}</li>
    <chat-item
      v-for="(msg, index) in msglist"
      :type="type"
      :rawMsg="msg"
      :userInfos="userInfos"
      :myInfo="myInfo"
      :key="(msg.idClient || index)"
      :isHistory='isHistory'
      @msg-loaded="msgLoaded"
    ></chat-item>
  </ul>
</template>
<script type="text/javascript">
import util from "@/utils";
import config from "@/configs";
import ChatItem from './ChatItem'
import pageUtil from '@/utils/page'

export default {
  components: {
    ChatItem
  },
  props: {
    type: String, // 类型，chatroom, session
    canLoadMore: [String, Boolean],
    msglist: {
      type: Array,
      default() {
        return [];
      }
    },
    userInfos: {
      type: Object,
      default() {
        return {};
      }
    },
    myInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    isHistory: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      isFullImgShow: false,
      msgLoadedTimer: null,
      currPagePos: 0
    };
  },
  updated () {
    let tempPagePos = pageUtil.getChatListHeight()
    pageUtil.scrollChatListDown(tempPagePos - this.currPagePos)
    this.currPagePos = tempPagePos
  },
  computed: {
    sessionId() {
      return this.$store.state.im.currSessionId;
    },
    scene() {
      return util.parseSession(this.sessionId).scene;
    },
    to() {
      return util.parseSession(this.sessionId).to;
    },
  },
  methods: {
    showFullImg(src) {
      this.$store.dispatch("im/showFullscreenImg", {
        src
      });
    },
    msgLoaded() {
      clearTimeout(this.msgLoadedTimer);
      this.msgLoadedTimer = setTimeout(() => {
        this.$emit("msgs-loaded");
      }, 20);
    },
    getHistoryMsgs() {
      if (this.canLoadMore) {
        this.$store.dispatch("im/getHistoryMsgs", {
          scene: this.scene,
          to: this.to
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.m-chat-list {
  padding: 40px 30px;
  width: 100%;
  flex:1;
  overflow-y: auto;
}
.u-msg {
  position: relative;
  padding: 0.2rem 30px;
  &.item-time {
    font-size: 0.8rem;
    text-align: center;
    color: #ccc;
  }
}
.link-to {
  font-size: 14px;
  color: #2D8DFE;
  cursor: pointer;
}
</style>
